<template>
  <div class="tool-box">

    <div class="tool-box-left">

      <div class="box-item">试卷名称：<el-input v-model="postForm.title" style="width: 500px" /></div>
      <div class="box-item">试卷分类： <dic-catalog-tree v-model="postForm.catId" dic-code="tmpl_catalog" width="500" /></div>
    </div>

    <div>
      <el-button icon="el-icon-plus" type="primary" @click="createGroup">
        添加大题
      </el-button>
    </div>

  </div>

</template>

<script>

export default {
  name: 'JoinTopNav',
  components: { },
  props: {
    data: Object
  },
  data() {
    return {
      postForm: {
      }
    }
  },
  watch: {
    data: {
      handler(val) {
        this.postForm = val
      }
    }
  },
  created() {
    this.postForm = this.data
  },
  methods: {
    // 创建事件
    createGroup() {
      this.$emit('create')
    }
  }
}
</script>

<style scoped>
.tool-box{
  padding:20px;
  background: rgb(238, 238, 238);
  margin-bottom: 20px;
  border-radius: 5px;
  line-height: 45px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.tool-box-left{
  flex-grow: 1;
  font-weight: 700;
}

.box-item{
  display: flex;
  align-items: center;
}

</style>
